<style scoped>
.footer-content{
  position: fixed;
  left: 0;
  bottom: -.05rem;
  width: 100%;
  height: 2.45rem;
  background-color: #f0f0f0;
  border-top:1px solid #e5e5e5;
  z-index: 99;
}
.footer-ul{
  display: flex;
}
.footer-ul .itme{
  flex: 1;
  text-align: center;
  font-size: .65rem;
}
  .footer-ul i{
    line-height: 1.25rem;
  }
  .footer-ul p{
    line-height: 1.2rem;
  }
  .itmeactive{
    color: #0c80ba;
    background-color: #e5e5e5;
  }
</style>

<template>
    <div class="footer-content">
      <footer>
        <ol class="footer-ul">
          <li v-for="(itme,index) in footerlist.tao_list" class="itme" :class="{itmeactive:index===footerlist.footer_active}" @click="footer_go_router(itme,index)">
            <i :class="itme.icon"></i>
            <p>{{itme.name}}</p>
          </li>
        </ol>
      </footer>
    </div>
</template>

<script>
    export default{
        data(){
            return {}
        },
        mounted(){

          let list = this.$store.state.footer_list.tao_list;
          let pahtname = this.$route.name;
          for(let i=0;i<list.length;i++){
            if(list[i].path == pahtname){
              this.$store.state.footer_list.footer_active = i;
            }
          }
         /* this.$router.push({
            name:pahtname
          })*/
        },
        methods: {
          footer_go_router(itme,index){
            let path = itme.path;
            this.$router.replace({
              name:path
            })
          }
        },
        computed: {
          footerlist(){
            return this.$store.state.footer_list
          }
        },
        watch: {},
        components: {},
    }
</script>
